<template>
	<view>
		<image :src="dataObj.cover" mode="aspectFill" style="height: 20vh;" @click="ViewImage(dataObj.cover)"></image>
		<view class="news-detail">
			<view class="detail-title">{{ dataObj.title }}</view>
			<view class="detail-extra">
				<text>来源：曲塘高级中学</text>
				<!-- <text>编辑时间：{{ dataObj.updateTime }}</text> -->
			</view>
			<view class="padding-lr">
				<view class="margin-bottom-sm">
					<text class="cuIcon-timefill text-orange padding-right-sm"></text>
					开始时间：{{ dataObj.startTime }}
				</view>
				<view class="margin-bottom-sm">
					<text class="cuIcon-timefill text-orange padding-right-sm"></text>
					结束时间：{{ dataObj.endTime }}
				</view>
				<view class="margin-bottom-sm">
					<text class="cuIcon-locationfill text-orange padding-right-sm"></text>
					活动地点：{{ dataObj.address }}
				</view>
				<view>
					<text class="cuIcon-peoplelist text-orange padding-right-sm"></text>
					报名人数：{{ dataObj.peopleNum }} 人
				</view>
			</view>
			<view class="detail-content">
				<view v-html="dataObj.content"></view>
				<view class="text-center padding">暂无更多内容~</view>
			</view>
		</view>
		<view class="bottom-option text-center" :style="[styleObj]" @click="onSignUp">
			<text v-if="dataObj.status===0" class="">{{ dataObj.hasSignUp ? '已报名' : '报名参加' }} </text>
			<text v-else-if="dataObj.status===1" class="text-white">进行中</text>
			<text v-else-if="dataObj.status===-1" class="text-white">活动结束</text>
		</view>
	</view>
</template>

<script>
	import {
		activity_detail,
		activity_signUp
	} from '@/common/api/api.js';

	export default {
		computed: {
			styleObj() {
				if (this.dataObj.status === 0) {
					return {
						backgroundColor: 'rgb(0, 135, 65)'
					}
				} else if (this.dataObj.status === 1) {
					return {
						backgroundColor: 'rgb(229, 77, 66)'
					}
				} else if (this.dataObj.status === -1) {
					return {
						backgroundColor: '#919191'
					}
				}
			}
		},
		data() {
			return {
				contentTitle: '校园资讯',
				dataObj: {
					status: 0
				}
			}
		},
		onLoad(e) {
			this.dataObj.id = e.id
			this.getData()
		},
		methods: {
			getData() {
				activity_detail({
					id: this.dataObj.id
				}).then(res => {
					this.dataObj = this.$s.res(res)
				})
			},
			ViewImage(e) {
				this.dataObj.imgList = [e]
				uni.previewImage({
					urls: this.dataObj.imgList,
					current: 0
				});
			},
			onSignUp() {
				if (!this.dataObj.hasSignUp) {
					activity_signUp({
						id: this.dataObj.id
					}).then(res => {
						this.$s.suc(res)
						this.getData()
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news-detail {
		background-color: #ffffff;

		.detail-title {
			border-left: 10rpx solid rgb(229, 77, 66);
			padding: 0 30rpx;
			font-size: $uni-font-size-title;
			font-weight: bold;
			color: $uni-color-title;
			line-height: 1.5;
		}

		.detail-extra {
			padding: 20rpx 30rpx;
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}

		.detail-content {
			padding: 30rpx 30rpx;
			font-size: $uni-font-size-paragraph;
			color: $uni-color-paragraph;
			line-height: 2;
			padding-bottom: 120rpx;
		}
	}

	.bottom-option {
		position: fixed;
		bottom: 0;
		z-index: 1024;
		height: 96rpx;
		width: 100vw;
		border-radius: 16rpx 16rpx 0 0;
		align-content: center;
		font-size: 16px;
		font-weight: 600;
		padding: 40rpx 0 64rpx;
	}
</style>